#@layout()
#define main()
<form class="layui-form layui-form-pane f-form">
    #(token)
    <input type="hidden" class="layui-input" name="taskCode" value="10003"/>

    <div class="layui-row layui-col-space1 task-row">
        #set(req=true)
        #@colStart('设备分组',6)
        <div id="groupDiv">
            #for(data:deviceGroupList)
            <input type="checkbox" name="groupId" lay-filter="groupFilter" title="#(data.name??)#(data.online??)" value="#(data.id??)"/>
            #end
        </div>
        #@colEnd()
    </div>

    <div class="layui-row layui-col-space1 task-row">
        <input lay-skin="primary" type="checkbox" name="type" lay-filter="devideDetails" title="设备明细"/>
    </div>

    <div class="layui-form-item" id="deviceListDiv" style="display: none"></div>

    <div class="layui-row layui-col-space1 task-row">
        #@colStart("待同步录制",20)
        <div id="tab_taginput">
            <input id="recordIds" name="recordIds">&nbsp;&nbsp;请在下方选择
        </div>
        #@colEnd()
        <div class="layui-form-mid layui-word-aux"></div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="task_submit" type="submit">同步</button>
        </div>
    </div>
</form>
<ul class="layui-tab-title" id="group_category">
</ul>
<ul class="layui-tab-title" id="group_list" style="display: none">
</ul>
<table id="maingrid" lay-filter="maingrid"></table>
<script src="/static/bootstrap-tagsinput/js/bootstrap.min.js"></script>
<script src="/static/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
<link rel="stylesheet" href="/static/bootstrap-tagsinput/css/bootstrap/bootstrap.css">
<link rel="stylesheet" href="/static/bootstrap-tagsinput/bootstrap-tagsinput.css">
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">选择同步方案</button>
    </div>
</script>


#define js()
<script>

    //初始化便签输入框
    $('#recordIds').tagsinput({
        itemValue: 'value',
        allowDuplicates: true,   //可以多次添加相同的标记
        itemText: 'text'
    });

    //标签被创建后
    $('#recordIds').on('itemAdded', function (event) {
        //设置标签输入框的placeholder
        $(".bootstrap-tagsinput > input").attr("placeholder", '')
    });
</script>

<script>
    var groupId = 0, groupName ="";
    getGroupCategory();

    gridArgs.title = '';
    gridArgs.dataId = 'id';
    // gridArgs.deleteUrl = '#(path)/portal/xianyu/product/delete';
    // gridArgs.updateUrl = '#(path)/portal/xianyu/product/edit/';
    // gridArgs.addUrl = '#(path)/portal/xianyu/product/add';
    gridArgs.gridDivId = 'maingrid';
    initGrid({
        id: 'maingrid'
        , elem: '#maingrid'
        , cellMinWidth: 100
        , cols: [[
            {title: '主键',field : 'id',width : 35,checkbox : true},
            {title:'序号',type:'numbers',width:35},
            {title:'录制分组名称',field:'name'},
            {title:'创建时间',field:'create_time'},
            {title:'修改时间',field:'update_time'},
            {title:'用户',field:'user_code'}
        ]]
        , url: "#(path)/user/upload/file/listByGroupId"
        , toolbar: '#toolbar'
        , searchForm: 'searchForm'
    });


    layui.use(['form', 'table'], function () {
        var $ = layui.$
            , layer = layui.layer
            , form = layui.form
            , table = layui.table;

        form.on('checkbox(groupFilter)', function (data) {
            let groupId = data.value;
            if ($(this).prop('checked')) {
                getDeviceList(groupId, form);
            } else {
                $("#deviceListDiv"+groupId).remove();
            }
        });

        form.on('checkbox(devideDetails)', function (data) {
            $('#deviceListDiv').toggle();
            if($("#deviceListDiv").is(":hidden")){
                $('#deviceListDiv').find("input[type=checkbox]").each(function (index, item) {
                    item.checked = data.elem.checked;
                });
                form.render('checkbox');
            }
        });

        //全选
        form.on('checkbox(allChoose)', function (data) {
            // var child = $("input[type='checkbox']");
            $(this).parent().find("input[type=checkbox]").each(function (index, item) {
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });

        form.on('select(deviceGroup)', function (data) {
            let groupId = data.elem[data.elem.selectedIndex].value;
            getDeviceList(groupId, form);
        });

        form.on('submit(task_submit)', function (data) {
            let count = $("input[name='groupId']:checked").length;
            if (count < 1) {
                layer.msg('请至少选择一个设备！', {icon: 2});
                return false;
            }
            if ($('#recordIds').val() == '') {
                layer.msg('请选择任务同步方案！', {icon: 2});
                return false;s
            }

            var fields=$(data.form).serialize();
            $.ajax({
                url : "#(path)/task/save",
                type : "POST",
                async: false,
                dataType : "json",
                data:fields,
                success : function(result) {
                    if (result.code == "success") {
                        layer.msg("发布成功",{icon:1});
                    } else {
                        layer.msg("发布失败",{icon:2});
                    }
                    $('#recordIds').tagsinput('removeAll');
                },
                error : function(result) {
                    layer.msg("发布失败",{icon:2});
                }
            });
            return false;
        });

        //头工具栏事件
        table.on('toolbar(maingrid)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;

            data.forEach((item, index, array) => {
                $('#recordIds').tagsinput('add', {"value": groupId + "|" + item.id, "text": item.name});
                layer.msg("添加成功");
            });
        });
    });

    function getDeviceList(groupId, form) {
        var url = "#(path)/device/group/deviceList?groupId=" + groupId;
        let deviceDiv=$('<div></div>'); //创建一个父div
        deviceDiv.attr('id','deviceListDiv'+groupId); //给父div设置id
        deviceDiv.attr('groupId', groupId);
        deviceDiv.addClass("layui-form-item");
        $.ajax({
            url: url,
            type: "POST",
            // data:params||{},
            success: function (result) {
                if (result.length > 0) {
                    $(deviceDiv).append('<input lay-skin="primary" type="checkbox" name="type" lay-filter="allChoose" title="执行设备"/><br/>');
                }
                for (var i = 0; i < result.length; i++) {
                    var data = result[i];
                    $(deviceDiv).append('<input type="checkbox" name="deviceId" lay-filter="choiceOne" title="' + data.name + data.online +  '" value="' + data.id + '"/>')
                    if ((i+1) % 5 == 0) {
                        $(deviceDiv).append('<br>');
                    }
                }
                $('#deviceListDiv').append(deviceDiv);
                form.render('checkbox');
            }
        });
    }

    function registerGroupCategory() {
        // $("ul#group_category").on("click",'li', function(){      //只需要找到你点击的是哪个ul里面的就行
        //     $("ul#group_category li").css({'background-color' : ""});
        //     let categoryName = $(this).text();
        //     if (categoryName) {
        //         $(this).css({'background-color' : "rgb(64, 158, 255)"});
        //         //上述方法等价于
        //         table.reload('maingrid', {
        //
        //             where: { //设定异步数据接口的额外参数，任意设
        //                 categoryName: categoryName
        //             }
        //             ,page: false
        //         }); //只重载数据
        //         //getGroupCategory();
        //     }
        // });

        $("ul#group_category").on("click",'li', function(){      //只需要找到你点击的是哪个ul里面的就行
            $("ul#group_category li").css({'background-color' : ""});
            let categoryName = $(this).text();
            if (categoryName) {
                $(this).css({'background-color' : "rgb(64, 158, 255)"});
                $("#group_list").show();
                getGroupList(categoryName)
            }
        });
    }


    function getGroupCategory() {
        var url = "#(path)/record/group/getGroupCategory";
        $("#group_category").empty();
        $.ajax({
            url: url,
            type: "GET",
            success: function (result) {
                for (let i = 0; i < result.length; i++) {
                    $('#group_category').append('<li>' + result[i] +'</li>');
                }
            }
        });

        registerGroupCategory();
    }

    function getGroupList(categoryName) {
        var url = "#(path)/record/group/list?categoryName="+ categoryName;
        $("#group_list").empty();
        $.ajax({
            url: url,
            type: "GET",
            success: function (result) {
                console.log(JSON.stringify(result))
                let list = result["list"];
                for (let i = 0; i < list.length; i++) {
                    let group_obj = list[i];
                    groupId = group_obj["id"];
                    $('#group_list').append('<li groupId='+group_obj["id"]+'>' + group_obj["name"] +'</li>');
                }
            }
        });
        registerGroupList();
    }

    function registerGroupList() {
        $("ul#group_list").on("click",'li', function(){      //只需要找到你点击的是哪个ul里面的就行
            $("ul#group_list li").css({'background-color' : ""});
            groupId = $(this).attr("groupId");
            groupName = $(this).text();
            if (groupId && groupName) {
                $(this).css({'background-color' : "rgb(64, 158, 255)"});
                $("#group_list").show();
                getUserUploadFile(groupId);
            }
        });
    }

    function getUserUploadFile(groupId) {
        table.reload('maingrid', {
            where: { //设定异步数据接口的额外参数，任意设
                groupId: groupId
            }
            ,page: false
        });
    }

</script>
#end

#end












